<template>
	<div class="detail-left">
		<!-- 头部部分 -->
		<div class="top">
			<div class="top-text">
				<image src="../../static/img/edit.png" mode="" class="top-img"></image>
				<span class="text">建筑概况</span>
			</div>

			<div class="top-right" v-if="realTimeDeviceLists.length>0">
				<button @click="toBuildDetail">详情</button>
			</div>
		</div>
		<!--设备展示部分 -->
		<div class="total-show">
			<!-- 总数 -->
			<div class="total-item border">
				<!-- 数字 -->
				<span class="item-number">{{Total}}</span>
				<!-- 类型 -->
				<span class='item-type'>总数</span>
			</div>
			<div class="total-item border">
				<span class="item-number green">{{Normal}}</span>
				<!-- 类型 -->
				<span class='item-type'>正常</span>
			</div>
			<div class="total-item border">
				<span class="item-number red">{{Alarm}}</span>
				<!-- 类型 -->
				<span class='item-type'>报警</span>
			</div>
			<div class="total-item border">
				<span class="item-number yellow">{{Fault}}</span>
				<!-- 类型 -->
				<span class='item-type'>故障</span>
			</div>
			<div class="total-item last">
				<span class="item-number black">{{Offline}}</span>
				<!-- 类型 -->
				<span class='item-type'>离线</span>
			</div>
		</div>
		<!-- 信息展示 -->
		<div class="info">
			<!-- 风险等级 -->
			<div class="safety-level">
				<div class="score">
					<div class="score-left">
						<span class="score-number">{{buildScore.score}}</span>
						<span class="score-text">分</span>
					</div>
					<div class="score-right">
						<div class="level">
							<span>风险等级：</span>
							<span class="item-level">{{buildScore.level}}</span>
						</div>
						<div class="time">
							<span>统计时间：</span>
							<span>{{buildScore.time}}</span>
						</div>
					</div>
				</div>
			</div>
			<!-- 信息展示 -->
			<div class="message-show">
				<div @click='()=>buildInfoShow=true'><span
						style="color: rgba(255,255,255,0.6); margin-right: 5px;">建筑地址:</span>
					<span>{{buildDetailObj.buildingAddress}}</span>
				</div>
				<div @click='()=>buildInfoShow=true'><span
						style="color: rgba(255,255,255,0.6);margin-right: 5px;">安全责任人:</span><span>{{buildDetailObj.safeUser}}{{buildDetailObj.safeUserPhone}}</span>
				</div>
				<div class="tip" v-if="buildInfoShow">
					<div class="tip-top">
						<img src="../../static/img/close.png" class="close-png" @click="()=>buildInfoShow=false" alt="">
					</div>
					<div class="tip-conent">
						<div><span style="color: rgba(255,255,255,0.6); margin-right: 5px;">建筑地址:</span>
							<span>{{buildDetailObj.buildingAddress}}</span>
						</div>
						<div><span
								style="color: rgba(255,255,255,0.6);margin-right: 5px;">安全责任人:</span><span>{{buildDetailObj.safeUser}}{{buildDetailObj.safeUserPhone}}</span>
						</div>
					</div>
				</div>

			</div>
		</div>
		<!-- 实时告警部分 -->
		<div class="real-alarm">
			<div class="top">
				<div class="top-left">
					<image src="../../static/img/edit.png" mode="" class="top-img"></image>
					<span class="text">实时告警</span>
					<image src="../../static/img/tip.png" mode="" class="tip-img pointer" @click="openRealShow"></image>
					<div class="tip" v-if="realisShow">
						<div class="tip-top">
							<span>说明</span>
							<img src="../../static/img/close.png" class="close-png" @click="closeRealShow" alt="">
						</div>
						<div class="tip-conent">
							实时报警、故障、离线信息
						</div>
					</div>
				</div>
				<div class="top-right" v-if="realTimeDeviceLists.length>0">
					<button @click="toOpenRealModel">更多</button>
				</div>

			</div>
			<!-- 头部部分 -->
			<!-- <! 告警列表 -->
			<div class="alarm-list">
				<div class="list-item border">
					<div class="left">
						<image src="../../static/img/alarm.png" mode="" class="alarm-img"></image>
					</div>
					<div class="right">
						<div class="type">
							<span>报警</span>
						</div>
						<div class="num">{{alarmNumObj.alarmNum}}</div>
					</div>
				</div>
				<div class="list-item border">
					<div class="left">
						<image src="../../static/img/fault.png" mode="" class="alarm-img"></image>
					</div>
					<div class="right">
						<div class="type">
							<span>故障</span>
						</div>
						<div class="num yellow">{{alarmNumObj.faultNum}}</div>
					</div>
				</div>
				<div class="list-item last">
					<div class="left">
						<image src="../../static/img/off-line.png" mode="" class="alarm-img"></image>
					</div>
					<div class="right">
						<div class="type">
							<span>离线</span>
						</div>
						<div class="num black">{{alarmNumObj.offlineNum}}</div>
					</div>
				</div>
			</div>
			<!-- 视频轮播 -->
			<div class="video-swiper" ref="videoSwiper" :class="realTimeDeviceLists.length==0?'active': ''">
				<swiper class="swiper" circular :autoplay="videoIsAuto" :interval="interval" :duration="duration"
					:current="swiperCurrent" @change="currentChange" v-if="realTimeDeviceLists.length>=1"
					:disable-touch="true">
					<swiper-item v-for="(item,ind) in realTimeDeviceLists" :key="item.messageId+ind" :class="item.border">
						<view class="swiper-item " @click.slef="toWatchDevice(item.code)">
							<!-- 标题部分 -->
							<div class="item-title">
								<img :src="item.bg" alt="">
								<span class="item-type" :style={color:[item.color]}>{{item.text}}</span>
								<span class="item-location">{{item.addressDesc}}</span>
							</div>
							<!-- 内容主体框 -->
							<div class="item-content">
								<div class="left">
									<!-- 有视频 -->
									<img :src="item.icon" alt="" class="video-img" v-if="item.icon">
									<!-- 无视频 -->
									<div class="no-video" v-else>
										<div class="no-video-top">
											<img src="../../static/img/noDeviceModel.png" alt="">
										</div>

									</div>
								</div>
								<div class="right">
									<div class="title">{{item.deviceTypeName}}</div>
									<div class="item">
										<span>ID:</span>
										<span class='text'>{{item.code}}</span>
									</div>
									<div class="item" @click.stop="()=>swiperInfoShow=true">
										<span>告警信息: </span>
										<span :style={color:[item.color]}
											class="alarm-reason">{{item.alarmReason}}</span>
										<div class="tip" v-if="swiperInfoShow">
											<div class="tip-top">
												<img src="../../static/img/close.png" class="close-png pointer"
													@click.stop="()=>swiperInfoShow=false" alt="">
											</div>
											<div class="tip-conent">
												<div>
													<div>
														<span>告警信息: </span>
														<span :style={color:[item.color]}>{{item.alarmReason}}</span>
													</div>
												</div>
											</div>
										</div>
									</div>
									<div class="item">
										<span>具体时间: </span>
										<span class="text">{{item.alarmTime}}</span>
									</div>
								</div>
							</div>
						</view>
					</swiper-item>
				</swiper>
				<div class="no-alarm" v-else>
					<image src="../../static/img/no-alarm.png" alt="">
						<div>暂无实时告警</div>
				</div>
				<!-- 左右箭头 -->
				<div class="leftright-arrow" v-show="realTimeDeviceLists.length>=2">
					<image :src="swiperImgs.left" mode="" class="left pointer" @click="siwiperLeft"></image>
					<image :src="swiperImgs.right" mode="" class="right pointer" @click="siwiperRight"></image>
				</div>
			</div>
		</div>
		<!-- 数据统计部分 -->
		<div class="statistics">
			<!-- 头部部分 -->
			<div class="top">
				<div class="top-left">
					<image src="../../static/img/edit.png" mode="" class="top-img"></image>
					<span class="text">数据统计</span>
					<image src="../../static/img/tip.png" mode="" class="tip-img pointer" @click="statisticsTipShow">
					</image>
					<div class="tip" v-if="statictisShow">
						<div class="tip-top">
							<span>说明</span>
							<img src="../../static/img/close.png" class="close-png" @click="closeStatisticShow" alt="">
						</div>
						<div class="tip-conent">
							统计当前建筑最近七天内故障、报警、离线数据以及报警情况原因分析
						</div>
					</div>
				</div>
				<div class="top-right">
					<div class="right-item pointer" v-for="item in echartsBtns" :key="item.id"
						:class="item.isSelect===true? 'active' : ''" @click="selectOptions(item.id)">
						<image :src="item.img" mode=""></image>
						<span>{{item.name}}</span>
					</div>

				</div>
			</div>
			<!-- echarts图表部分 -->
			<div class="echarts">
				<alarm-line v-if="optionsIsShow" :deptId='deptId' :buildId='currentBuilding'></alarm-line>
				<alarm-pie v-else :deptId='deptId' :buildId='currentBuilding'></alarm-pie>
			</div>
		</div>
		<!-- 版权部分 -->
		<div class="power" style="margin-top: 14px;overflow: hidden;">
			<img src="../../static/img/power1.png" alt="" style="margin-right: 20px;">
			<img src="../../static/img/power2.png" alt="">
			<span style="color: rgba(255,255,255,.4);margin-left: 30px;">技术支持：防火云</span>
		</div>
		<real-model v-if="realShow" :deptId=deptId :buildId="currentBuilding" @closeRealModel="closeRealModel">
		</real-model>
		<!-- 报警弹窗 -->
		<alarm-device ref='alarmDialog' v-if="alarmDialog" :isSpeaker.sync="isSpeaker" @closeModel="isShowModel">
		</alarm-device>
		<!-- 故障弹窗 -->
		<fault-model ref='faultDialog' v-if="faultDialog" @closeFaultModel="isShowFaultModel"></fault-model>
		<!-- 建筑详情弹窗 -->
		<build-detail v-if="buildShow" @isBuildShow='isBuildShow' :deptId='currentDeptId'
			:buildId='currentBuilding'></build-detail>
		<logo-info :show.sync="logoInfoShow"></logo-info>
	</div>
</template>

<script>
	import api from "@/api/api.js"
	import deviceApi from "@/api/device.js"
	import * as echarts from 'echarts';
	import alarmPie from "@/pages/newDetail/alarm-pie.vue"
	import alarmLine from "@/pages/newDetail/alarm-line.vue"
	import RealModel from "@/component/model/real-model.vue"
	import alarmDevice from "@/component/model/alarm-model.vue"
	import faultModel from "@/component/model/falut-model.vue"
	import BuildDetail from "@/component/model/bulidDetail.vue"
	import LogoInfo from '@/component/dealog/LogoInfo.vue';
	export default {
		components: {
			alarmPie,
			alarmLine,
			RealModel,
			alarmDevice,
			faultModel,
			BuildDetail,
			LogoInfo
		},
		props: {
			buildId: {
				type: Number,
				default: 0
			},
			deptId: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				autoplay: true,
				interval: 3000,
				duration: 500,
				deviceTotal: '', //设备总数

				Total: '', //设备总数数量
				Normal: '', //设备正常数量
				Alarm: '', //设备报警数量
				Fault: '', //设备故障数量
				Offline: '', //设备离线数量

				buildScore: {
					score: '',
					level: '',
					time: ''
				},
				realTimeDeviceLists: [],
				buildDetailObj: {},
				echartsBtns: [{
						id: 1,
						name: '报表统计',
						isSelect: true,
						img: require('../../static/img/health.png')
					},
					{
						id: 2,
						name: '报警分析',
						isSelect: false,
						img: require('../../static/img/health2.png')
					},
				],
				buildInfoShow: false,
				swiperInfoShow: false,
				optionsIsShow: true,
				statictisShow: false,
				realisShow: false,
				swiperCurrent: 0,
				videoIsAuto: true,
				alarmPage: {
					pageSize: 10,
					pageNum: 1
				},
				BaseUrl: uni.getStorageSync('urlText'),
				alarmNumObj: {},
				realShow: false,
				alarmDialog: false,
				faultDialog: false,
				swiperImgs: {
					left: require("../../static/img/left-arrow1.png"),
					right: require("../../static/img/right-arrow2.png")
				},
				isSpeaker:false,
				endDate:'',
				startDate:'',

				currentBuilding:null,
				currentDeptId:null,
				buildShow:false,
				logoInfoShow:false
			}
		},
		async created() {
			//时间初始化,往前推七天
			let oneDay = 24 * 60 * 60 * 1000
			let endTime = new Date(Date.now() - oneDay)
			this.endDate = this.formatterDate(endTime, "yyyy-MM-dd")
			let startTime = new Date(Date.now() - 7 * oneDay)
			this.startDate = this.formatterDate(startTime, "yyyy-MM-dd")
			let self = this
			uni.$on('buildLeftRefresh', function(data) {
				console.log(data)
				self.currentBuilding = data.currentBuilding
				self.currentDeptId = data.currentDeptId
				self.init()
				self.getRealTimeData()
			})
			//刷新
			uni.$on('globalRefreshDetail', function(data) {
				self.init()
				self.getRealTimeData()
			})


		},
		mounted() {
			//时间格式化函数

			this.$refs.videoSwiper.addEventListener("mouseover", () => {
				this.videoIsAuto = false
			})
			this.$refs.videoSwiper.addEventListener("mouseleave", () => {
				this.videoIsAuto = true
			})
		},
		methods: {
			//获取实时数据数量
			async getRealTimeData() {
				let res2 = await this.$api.getAlarmCount({
					deptId: this.currentDeptId,
					isDept: 0,
					buildId: this.currentBuilding
				})
				this.alarmNumObj = res2.data
			},
			//时间格式化
			formatterDate(date, fmt) {
				let nowDate = {
					yyyy: date.getFullYear(), // 年
					MM: date.getMonth() + 1, // 月份
					dd: date.getDate(), //日
					hh: date.getHours(),
					mm: date.getMinutes(),
					ss: date.getSeconds()
				}
				if (/(y+)/.test(fmt)) {
					fmt = fmt.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length));
				}
				for (var k in nowDate) {
					if (new RegExp("(" + k + ")").test(fmt)) {
						fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (nowDate[k]) : (("00" + nowDate[k]).substr((
							"" + nowDate[k]).length)));
					}
				}
				return fmt;
			},
			init() {
				this.requestStatusNum()
				this.requestBuildScore()
				this.swiperCurrent=0  //轮播重回第一张
				//实时报警数据
				deviceApi.getDeviceAlarm({
					buildId: this.currentBuilding,
					deptId: this.currentDeptId,
					isDept: 0,
					pageSize: 10,
					pageNum: 1,
					confirm: 0 //未处理
				}).then(res => {
					console.log(ProgressEvent,'数据')
					res.data.list.forEach((v, index) => {
						if (!v.alarmReason && v.alarmReason != '') {
							v.alarmReason = '--'
						}
						v.alarmTime = (v.alarmTime.slice(5)).replace(/-/g, '/')
						if (v.status === 1) {
							v.text = "报警"
							v.color = 'rgba(255, 61, 61, 1)'
							v.border = 'alarm'
							v.bg = require("../../static/img/monitor-alarm.png")
						} else if (v.status === 2) {
							v.text = '正常'


						} else if (v.status === 4) {
							v.text = '离线'
							v.color = 'rgba(203, 206, 220, 1)'
							v.bg = require("../../static/img/monitor-offline.png")
							v.border = 'offline'
						} else {
							v.text = '故障'
							v.color = 'rgba(254, 169, 64, 1)'
							v.bg = require("../../static/img/monitor-fault.png")
							v.border = 'fault'
						}
						switch (v.system) {
							case "fc_system_wxgy":
								v.icon = require("../../static/img/wuxianyangan-model.png")
								break;
							case "fc_system_dqhz":
								v.icon = require("../../static/img/dianqihuozai-model.png")
								break;
							case "fc_system_xfdy":
								v.icon = require("../../static/img/xiaofangdianyuan-model.png")
								break;
							case "fc_system_xfys":
								v.icon = require("../../static/img/xiaofangyongshui-model.png")
								break;
							case "fc_system_wlsb":
								v.icon = require("../../static/img/wulianshebei-model.png")
								break;
							case "fc_system_fhm":
								v.icon = require("../../static/img/fanghuomen-model.png")
								break;
							case "fc_system_zm":
								v.icon = require("../../static/img/zhihuizhaoming-model.png")
								break;
							case "fc_system_cdz":
								v.icon = require("../../static/img/congdianzhuang-model.png")
								break;
							case "fc_system_krqt":
								v.icon = require("../../static/img/keranqiti-model.png")
								break;
							case "fc_system_xfzj":
								v.icon = require("../../static/img/xiaofangzhuji-model.png")
								break;
						}
					})
					this.realTimeDeviceLists = res.data.list
				})
				api.findById({
					id: this.currentBuilding
				}).then(res => {
					console.log(res)
					this.buildDetailObj = res.data
					if (this.buildDetailObj && !this.buildDetailObj.deptName) {
						this.buildDetailObj.deptName = '--'
					}
					if (this.buildDetailObj && !this.buildDetailObj.safeUser) {
						this.buildDetailObj.safeUser = '--'
					}
				})
			},
			changeAutoplay(e) {
				this.autoplay = !this.autoplay
			},
			intervalChange(e) {
				this.interval = e.target.value
			},
			durationChange(e) {
				this.duration = e.target.value
			},
			//请求点击建筑下的设备状态数量
			requestStatusNum() {
				deviceApi.getBuildDevice({
					buildingId: this.currentBuilding,
					floor: '-10000'
				}).then(res => {
					this.Alarm = res.data.all.alarmNum
					this.Normal = res.data.all.normalNum
					this.Fault = res.data.all.faultNum
					this.Offline = res.data.all.offlineNum
					this.Total = res.data.all.totalNum
				})

			},

			//请求建筑下的设备数量
			async requsetDeviceNum() {
				let res = await this.$api.countByBuildId({
					buildId: this.currentBuilding,
					deptId: this.currentDeptId
				})
				let total = 0

				if (res.data.length < 5) {
					this.Alarm = 0
					this.Normal = 0
					this.Fault = 0
					this.Offline = 0
					res.data.forEach(v => {
						if (v.status == 4 && v.deviceCount >= 1) {
							this.Offline = v.deviceCount
						}
						if (v.status == 1 && v.deviceCount >= 1) {
							this.Alarm = v.deviceCount
						}
						if (v.status == 2 && v.deviceCount >= 1) {
							this.Normal = v.deviceCount
						}
						if (v.status == 0 && v.deviceCount >= 1) {
							this.Fault = v.deviceCount
						}
						total += v.deviceCount
					})
				}
				this.Total = total

			},
			//请求建筑的评估分数
			async requestBuildScore() {
				let res = await this.$api.getBuildingScore({
					buildId: this.currentBuilding
				})
				if (res.data.fraction) {
					this.buildScore.score = res.data.fraction

				} else {
					this.buildScore.score = 0
				}
				if (res.data.safetyLevel) {
					this.buildScore.level = res.data.safetyLevel
				} else {
					this.buildScore.level = '暂无风险等级'
				}
				if (res.data.assessmentTime) {
					this.buildScore.time = res.data.assessmentTime
				} else {
					this.buildScore.time = '--'
				}



			},
			selectOptions(id) {
				if (id === 1) {
					this.optionsIsShow = true
				} else {
					this.optionsIsShow = false
				}
				this.echartsBtns.forEach(v => {
					if (v.id === id) {
						v.isSelect = true

					} else {
						v.isSelect = false
					}

				})

			},
			statisticsTipShow() {
				this.statictisShow = true
			},
			closeStatisticShow() {
				this.statictisShow = false
			},
			openRealShow() {
				this.realisShow = true
			},
			closeRealShow() {
				this.realisShow = false
			},
			siwiperLeft() {
				this.swiperCurrent--
			},
			siwiperRight() {
				let index = this.realTimeDeviceLists.length - 1
				if (this.swiperCurrent >= index) {
					this.swiperCurrent = index
				} else {

					this.swiperCurrent++
				}
			},
			currentChange(e) {
				if (e.detail.current >= 1) {
					this.swiperImgs.left = require("../../static/img/left-arrow.png")
				} else {
					this.swiperImgs.left = require("../../static/img/left-arrow1.png")
				}
				let index = this.realTimeDeviceLists.length - 1
				if (e.detail.current < index) {
					this.swiperImgs.right = require("../../static/img/right-arrow2.png")
				} else {
					this.swiperImgs.right = require("../../static/img/right-arrow.png")

				}
				this.swiperCurrent = e.detail.current
			},
			toOpenRealModel() {
				this.realShow = true
			},
			closeRealModel(val) {
				this.realShow = false
			},
			toWatchDevice(id) {
				console.log(id,'这是id')
				this.realTimeDeviceLists.forEach(v => {
					if (v.code === id && v.status === 1) {
						this.alarmDialog = true
					} else if (v.code === id && v.status === 0) {
						this.faultDialog = true
					}
				})
			},
			//关闭报警弹窗
			isShowModel(val) {
				this.alarmDialog = val.show
			},
			//关闭故障弹窗
			isShowFaultModel(val) {
				this.faultDialog = val.show
			},
			//点击建筑详情去往建筑详情
			toBuildDetail() {
				this.buildShow = true
			},
			// 接受建筑详情子传父传值
			isBuildShow(val) {
				this.buildShow = val
			}

		},
		beforeDestroy() {			uni.$off('globalRefreshDetail')
		}

	}
</script>

<style lang="scss" scoped>
	.detail-left {
		margin-left: 10px;
		width: 25%;
		display: flex;
		flex-direction: column;
		margin-right: 20px;
		height: 100%;
		background: rgba(0, 22, 39, 0.5);

		.top {
			height: 4.5vh;
			min-height: 25px;
			display: flex;
			align-items: center;
			border-bottom: 1px solid #1BCEFF;
			justify-content: space-between;

			.top-img {
				width: 7px;
				height: 16px;
			}

			.detail-icon {
				img {
					width: 20px;
				}
			}

			.text {
				color: #fff;
				margin-left: 6px;
				font-size: 16px;
				font-family: PingFangSC-Regular, PingFang SC;

			}

			.top-right {
				button {
					width: 62px;
					height: 28px;
					background: rgba(0, 20, 44, 0.43);
					box-shadow: inset 0px 0px 5px 0px rgba(0, 183, 255, 1);
					border-radius: 2px;
					border: 1px solid #02C3FF;
					line-height: 28px;
					color: #fff;
					font-size: 12px;
					color: #02C3FF;
				}
			}
		}

		// 设备展示
		.total-show {
			width: 100%;
			margin-top: 10px;
			background-color: rgba(27, 165, 255, 0.0800);
			height: 6.5vh;
			min-height: 45px;
			display: flex;


			.total-item {
				position: relative;
				flex: 1;
				display: flex;
				align-items: center;
				flex-direction: column;
				justify-content: center;
				font-size: 26px;

				.item-number {
					margin-top: -8px;
					color: rgba(2, 195, 255, 1);
				}

				.item-type {
					font-size: 12px;
					color: #fff;
				}

				.green {
					color: rgba(0, 255, 196, 1)
				}

				.red {
					color: rgba(255, 61, 61, 1)
				}

				.yellow {
					color: rgba(254, 169, 64, 1)
				}

				.black {
					color: rgba(203, 206, 220, 1)
				}

			}

			.border::after {
				top: 50%;
				right: 0;
				transform: translate(0, -50%);
				position: absolute;
				content: '';
				display: block;
				width: 0px;
				height: 36px;
				opacity: 0.5;
				border: 1px solid;
				border-image: linear-gradient(180deg, rgba(19, 230, 229, 0), rgba(19, 230, 229, 1), rgba(19, 230, 229, 0)) 1 1;
			}



		}

		// 风险等级
		.info {
			height: calc(20vh - 30px);
			padding: 0 20px;
			overflow: auto;
			min-height: 70px;
			margin-bottom: 20px;

			.safety-level {
				.score {
					display: flex;
					border-bottom: 1px solid rgba(18, 153, 192, 0.2);
					padding: 10px 0;
				}

				.score-left {
					width: 90px;
					height: 90px;
					background: url("../../static/img/score.png") no-repeat;
					text-align: center;
					line-height: 90px;

					.score-number {
						font-size: 24px;
						color: #ffffff;
					}

					.score-text {
						font-size: 12px;
						color: #fff;
					}
				}

				.score-right {
					margin: 20px 0 0 14px;

					.level {
						font-size: 18px;
						color: #fff;

						.item-level {
							color: #FEA940;
						}
					}

					.time {
						margin-top: 0.125rem;
						color: rgba(255, 255, 255, 0.7);
						font-size: 14px;
					}
				}
			}

			.message-show {
				margin: 0 30px 0 0px;
				color: rgba(255, 255, 255, 0.8);
				position: relative;
				top: 20px;


				div {
					margin-bottom: 5px;
					white-space: nowrap;
					text-overflow: ellipsis;
					overflow: hidden;
				}

				span {
					color: rgba(255, 255, 255, 0.8)
				}

				.tip {
					background-color: rgba(65, 60, 43, 0.8000);
					word-wrap: break-word;
					.tip-top {
						justify-content: flex-end;
						display: flex;

						.close-png {
							width: 12px;
							height: 12px;
						}
					}

					z-index: 1000;
					color: #fff;
					top:-70px;
					left: -20px;
					position: absolute;
					padding: 20px 20px;
					border-radius: 6px;
					border: 1px solid rgba(245, 166, 35, 0.5);


					.tip-content {
						font-size: 16px;
					}
				}
			}
		}

		// 实时告警
		.real-alarm {
			height: calc(43.95vh - 104px);
			position: relative;

			.top {
				display: flex;
				justify-content: space-between;

				.top-left {
					display: flex;
					align-items: center;
				}

				.top-right {
					button {
						width: 62px;
						height: 28px;
						background: rgba(0, 20, 44, 0.43);
						box-shadow: inset 0px 0px 5px 0px rgba(0, 183, 255, 1);
						border-radius: 2px;
						border: 1px solid #02C3FF;
						line-height: 28px;
						color: #fff;
						font-size: 12px;
						color: #02C3FF;
					}
				}
			}

			.tip-img {
				width: 16px;
				height: 17px;
				margin-left: 10px;
			}

			.tip {
				background-color: rgba(65, 60, 43, 0.8000);


				.tip-top {
					justify-content: space-between;
					display: flex;


					.close-png {
						width: 12px;
						height: 12px;
					}
				}

				z-index: 5;
				color: #fff;
				top:20px;
				left: 23%;
				position: absolute;
				width: 250px;
				padding: 10px 20px;
				border-radius: 6px;
				border: 1px solid rgba(245, 166, 35, 0.5);

				.tip-content {
					font-size: 16px;
				}
			}

			// 告警列表
			.alarm-list {
				margin-top: 10px;
				height: 6.5vh;
				min-height: 60px;
				background-color: rgba(27, 165, 255, 0.0800);
				display: flex;


				.list-item {
					position: relative;
					flex: 1;
					display: flex;
					border-image: linear-gradient(180deg, rgba(19, 230, 229, 0), rgba(19, 230, 229, 1), rgba(19, 230, 229, 0)) 1 1;

					.left {
						line-height: 0.525rem;
						margin: 0.1625rem 0 0 0.3125rem;
						cursor: pointer;

						.alarm-img {
							width: 42px;
							height: 42px;
						}
					}

					.right {
						text-align: center;
						margin-left: 13px;
						color: #fff;

						.type {
							margin-top: 10px;
							font-size: 12px;

						}

						.num {
							font-size: 26px;
							color: #FF3D3D;
						}

						.yellow {
							color: #FEA940;
						}

						.black {
							color: #CBCEDC;
						}


					}
				}

				.border::after {
					top: 50%;
					right: 0;
					transform: translate(0, -50%);
					position: absolute;
					content: '';
					display: block;
					width: 0px;
					height: 36px;
					opacity: 0.5;
					border: 1px solid;
					border-image: linear-gradient(180deg, rgba(19, 230, 229, 0), rgba(19, 230, 229, 1), rgba(19, 230, 229, 0)) 1 1;
				}
			}

			.video-swiper {
				height: calc(32.95vh - 124px);
				overflow: auto;
				overflow-x: hidden;
				padding-bottom: 1px;
				.no-alarm {
					height: 100%;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;

					uni-image {
						width: 132px;
						height: 78px;
					}

					div {
						color: rgba(255, 255, 255, 0.7);
						font-size: 14px;
					}
				}

				margin-top: 10px;
				width: 100%;
				position: relative;

				.swiper {
					height: 201px;
				}


				.swiper-item {
					min-height: 170px;
					.item-title {
						display: flex;
						align-items: center;
						margin: 20px 0 0 20px;

						.item-type {
							color: rgba(254, 169, 64, 1);
							font-size: 16px;
							font-weight: 500;
							margin-right: 11px;
							padding-right: 11px;
							position: relative;
						}

						.item-type::after {
							content: '';
							display: block;
							position: absolute;
							right: 0;
							top: 55%;
							transform: translate(0, -50%);
							height: 16px;
							opacity: 0.2;
							border: 1px solid #FFFFFF;

						}

						.item-location {
							color: #fff;
							font-size: 14px;
						}
					}

					.item-content {
						margin-top: 5px;
						display: flex;

						.left {
							margin-left: 20px;
							width: 140px;
							height: 11.5vh;
							cursor: pointer;

							.video-img {
								width: 120px;
							}

							.no-video {
								box-sizing: border-box;
								width: 120px;
								height: 120px;

								.no-video-top {
									text-align: center;
								}

								.no-video-bottom {
									margin-top: 10px;
									text-align: center;
									font-size: 14px;
									color: #fff;
								}
							}
						}

						.right {
							.title {
								color: #fff;
								font-size: 16px;
								font-weight: 500;
							}

							.item {
								width: 80%;
								padding-right: 0;
								display: flex;
								font-size: 14px;
								margin-top: 10px;
								color: rgba(255, 255, 255, 0.6);

								span {
									margin-right: 10px;
								}

								.alarm-reason {
									width: 200px;
									overflow: hidden;
									white-space: nowrap;
									text-overflow: ellipsis;
								}

								.text {
									color: rgba(255, 255, 255, 0.8);
								}

								.tip {
									position: relative;
									background-color: rgba(65, 60, 43, 0.8000);
									cursor: default;

									.tip-top {

										justify-content: flex-end;
										display: flex;

										.close-png {
											right: 20px;
											top: 5px;
											position: absolute;
											width: 12px;
											height: 12px;
										}
									}

									z-index: 0;
									color: #fff;
									top:60px;
									left: 33%;
									position: absolute;
									padding: 20px 20px;
									border-radius: 6px;
									border: 1px solid rgba(245, 166, 35, 0.5);


									.tip-content {
										font-size: 16px;
									}
								}
							}
						}
					}
				}

				.alarm {
					background-color: rgba(0, 22, 39, 0.5);
					border: 1px solid;
					border-image: linear-gradient(360deg, rgba(255, 61, 61, 0.22), rgba(255, 61, 61, 0.5)) 1 1;
				}

				.fault {
					background-color: rgba(0, 22, 39, 0.5);
					border: 1px solid;
					border-image: linear-gradient(360deg, rgba(254, 169, 64, 0.22), rgba(254, 169, 64, 0.5)) 1 1;
				}

				.offline {
					background-color: rgba(0, 22, 39, 0.5);
					border: 1px solid;
					border-image: linear-gradient(360deg, rgba(203, 206, 220, 0.22), rgba(203, 206, 220, 0.5)) 1 1;
				}

				.leftright-arrow {
					.left {
						position: absolute;
						width: 27px;
						height: 27px;
						left: 10px;
						top: 88px;

					}

					.right {
						position: absolute;
						width: 27px;
						height: 27px;
						right: 10px;
						top: 88px;

					}
				}
			}

			.active {
				border: none;
			}
		}

		//数据统计
		.statistics {
			height: 19.5vh;
			margin-top: 1.85vh;

			.top {
				position: relative;
				display: flex;
				justify-content: space-between;

				.top-left {
					display: flex;
					align-items: center;
				}

				.top-right {
					display: flex;
					align-items: center;


					.right-item {

						background: rgba(0, 20, 44, 0.43);
						box-shadow: inset 0px 0px 5px 0px rgba(0, 183, 255, 0.44);
						color: rgba(255, 255, 255, 0.7000);
						width: 90px;
						height: 28px;
						margin-left: 20px;
						display: flex;
						align-items: center;
						font-size: 12px;

						image {
							margin-left: 11px;
							vertical-align: middle;
							width: 15px;
							height: 15px;
							margin-right: 5px;
						}
					}

					.active {
						box-shadow: inset 0px 0px 5px 0px rgba(0, 183, 255, 1);
						border-radius: 2px;
						border: 1px solid #02C3FF;
						color: rgba(2, 195, 255, 1);
					}
				}

				.tip {
					background-color: rgba(65, 60, 43, 0.8000);

					.tip-top {
						justify-content: space-between;
						display: flex;
						color: rgba(254, 169, 64, 1);

						.close-png {
							width: 12px;
							height: 12px;
						}
					}

					z-index: 5;
					color: #fff;
					top:20px;
					left: 23%;
					position: absolute;
					width: 250px;


					padding: 10px 20px;
					border-radius: 6px;
					border: 1px solid rgba(245, 166, 35, 0.5);

					.tip-content {
						font-size: 16px;
					}
				}
			}

			.tip-img {
				width: 16px;
				height: 17px;
				margin-left: 10px;
			}

			.echarts {
				width: 100%;
				height: calc(15vh - 10px);
				overflow-y: auto;
				overflow-x: hidden;
				margin-top: 10px;
				background-color: rgba(0, 22, 39, 0.5);
			}
		}

		.power {
			margin-top: 3.7vh;
			height: 3.7vh;
			display: flex;
			align-items: center;
			padding-left: 0.32rem;
			background-color: rgba(0, 22, 39, 1);
			cursor: pointer;
			font-size: 0.15rem;
		}

	}
</style>
